<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="b1" onclick="s1()">1</button>
    <button id="b2" onclick="s2()">2</button>
    <button id="b3" onclick="s3()">3</button>
    <button id="b4" onclick="s4()">4</button>
    <button id="b5" onclick="s5()">5</button>
    <button onclick="s6()">放大</button>
    <button onclick="s7()">缩小</button>
    <button onclick="s8()">上一张</button>
    <button onclick="s9()">下一张</button>
    <button onclick="s10()">旋转</button>

    <hr>
    <img style="transition: all 1s" id="pic" width="400" src="f1.jpg" alt="">


<script>
    var i=1;
    function s1(){
        pic.src="f1.jpg";
        b1.style=red;
        i=1;

    }
</script>

<script>
    var i=1;
    function s2(){
        pic.src="f2.jpg";
        i=2;
    }
</script>

<script>
    var i=1;
    function s3(){
        pic.src="f3.jpg";
        i=3;
    }
</script>

<script>
    var i=1;
    function s4(){
        pic.src="f4.jpg";
        i=4;
    }
</script>

<script>
    var i=1;
    function s5(){
        pic.src="f5.jpg";
        i=5;
    }
</script>
<script>
    function s6(){
        pic.width=pic.width*1.2
        
    }
</script>
<script>
    function s7(){
        pic.width=pic.width*0.8
        
    }
</script>
<script>
    function s8(){
if(i==1){
    pic.src="f5.jpg";
}
if(i==2){
    pic.src="f1.jpg";
}
if(i==3){
    pic.src="f2.jpg";
}
if(i==4){
    pic.src="f3.jpg";
}
if(i==5){
    pic.src="f4.jpg";
}


        
    }
</script>
<script>
    function s9(){
        pic.width=pic.width*0.8
        
    }
</script>
<script>
    var deg = 0;

function s10(){
    deg += 90;
    pic.style.transform = "rotate("+deg+"deg)";

}

</script>

</body>
</html>